<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>分类页面</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }
        body {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        /* Mock up 样式 */
        .mock-up {
            position: relative;
            width: 375px;
            height: 812px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 40px;
            overflow: hidden;
        }
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background: transparent;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: #000;
            font-size: 14px;
        }
        /* 底部导航栏样式 */
        .tab-bar {
            background: #ffffff;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.05);
        }
        /* 分类导航样式 */
        .category-nav {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mock-up">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>9:41</span>
            <div class="flex items-center space-x-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                </svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M2 22h20V2L2 22z"/>
                </svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/>
                </svg>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="h-full pb-16">
            <!-- 分类导航 -->
            <div class="category-nav sticky top-0 px-4 py-3 z-10 flex items-center justify-between border-b border-gray-100">
                <div class="flex items-center space-x-4">
                    <span class="text-blue-500 font-medium">全部省份</span>
                    <span class="text-gray-400">热门景点</span>
                    <span class="text-gray-400">特色主题</span>
                </div>
               
            </div>

            <!-- 省份列表 -->
            <div class="flex h-[calc(100%-44px)]">
                <!-- 左侧省份导航 -->
                <div class="w-24 bg-gray-50 py-2 overflow-auto">
                    <div class="text-center py-3 bg-white text-blue-500 text-sm border-r-2 border-blue-500 cursor-pointer" onclick="showProvince('xinjiang')">新疆</div>
                    <div class="text-center py-3 text-gray-500 text-sm cursor-pointer hover:bg-gray-100" onclick="showProvince('xizang')">西藏</div>
                    <div class="text-center py-3 text-gray-500 text-sm cursor-pointer hover:bg-gray-100" onclick="showProvince('sichuan')">四川</div>
                </div>

                <!-- 右侧城市列表 -->
                <div class="flex-1 overflow-auto px-4 py-2">
                    <!-- 新疆城市 -->
                    <div id="xinjiang-cities" class="province-cities">
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="text-lg font-medium text-gray-800">新疆维吾尔自治区</h3>
                                <span class="text-xs text-gray-400">45个景点</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="text-center py-3 bg-blue-50 rounded-lg text-sm font-medium text-blue-600 cursor-pointer hover:bg-blue-100" onclick="selectCity('乌鲁木齐')">乌鲁木齐</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('喀什')">喀什</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('伊犁')">伊犁</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('阿克苏')">阿克苏</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('库尔勒')">库尔勒</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('吐鲁番')">吐鲁番</div>
                            </div>
                        </div>
                        
                        <!-- 热门产品推荐 -->
                        <div class="mt-6">
                            <h4 class="text-sm font-medium text-gray-700 mb-3">🔥 热门产品</h4>
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow" onclick="viewProduct('新疆天山天池一日游')">
                                    <div class="flex items-center justify-between">
                                        <div class="flex-1">
                                            <h5 class="text-sm font-medium text-gray-800">新疆天山天池一日游</h5>
                                            <p class="text-xs text-gray-500 mt-1">含往返交通+门票+导游</p>
                                            <div class="flex items-center mt-2">
                                                <span class="text-orange-500 font-bold text-sm">¥299</span>
                                                <span class="text-xs text-gray-400 line-through ml-2">¥399</span>
                                                <span class="bg-red-100 text-red-600 text-xs px-1 rounded ml-2">限时</span>
                                            </div>
                                        </div>
                                        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-xs">天池</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow" onclick="viewProduct('喀纳斯湖三日游')">
                                    <div class="flex items-center justify-between">
                                        <div class="flex-1">
                                            <h5 class="text-sm font-medium text-gray-800">喀纳斯湖三日游</h5>
                                            <p class="text-xs text-gray-500 mt-1">包含住宿+餐食+景区门票</p>
                                            <div class="flex items-center mt-2">
                                                <span class="text-orange-500 font-bold text-sm">¥1,299</span>
                                                <span class="text-xs text-gray-400 line-through ml-2">¥1,599</span>
                                                <span class="bg-green-100 text-green-600 text-xs px-1 rounded ml-2">热销</span>
                                            </div>
                                        </div>
                                        <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-xs">喀纳斯</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 西藏城市 -->
                    <div id="xizang-cities" class="province-cities hidden">
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="text-lg font-medium text-gray-800">西藏自治区</h3>
                                <span class="text-xs text-gray-400">32个景点</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="text-center py-3 bg-blue-50 rounded-lg text-sm font-medium text-blue-600 cursor-pointer hover:bg-blue-100" onclick="selectCity('拉萨')">拉萨</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('日喀则')">日喀则</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('林芝')">林芝</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('昌都')">昌都</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('山南')">山南</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('那曲')">那曲</div>
                            </div>
                        </div>
                        
                        <!-- 热门产品推荐 -->
                        <div class="mt-6">
                            <h4 class="text-sm font-medium text-gray-700 mb-3">🔥 热门产品</h4>
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow" onclick="viewProduct('拉萨布达拉宫一日游')">
                                    <div class="flex items-center justify-between">
                                        <div class="flex-1">
                                            <h5 class="text-sm font-medium text-gray-800">拉萨布达拉宫一日游</h5>
                                            <p class="text-xs text-gray-500 mt-1">含门票+专业导游+氧气瓶</p>
                                            <div class="flex items-center mt-2">
                                                <span class="text-orange-500 font-bold text-sm">¥399</span>
                                                <span class="text-xs text-gray-400 line-through ml-2">¥499</span>
                                                <span class="bg-blue-100 text-blue-600 text-xs px-1 rounded ml-2">经典</span>
                                            </div>
                                        </div>
                                        <div class="w-12 h-12 bg-gradient-to-br from-red-400 to-red-600 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-xs">布宫</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow" onclick="viewProduct('林芝桃花节三日游')">
                                    <div class="flex items-center justify-between">
                                        <div class="flex-1">
                                            <h5 class="text-sm font-medium text-gray-800">林芝桃花节三日游</h5>
                                            <p class="text-xs text-gray-500 mt-1">春季限定+住宿+餐食</p>
                                            <div class="flex items-center mt-2">
                                                <span class="text-orange-500 font-bold text-sm">¥1,899</span>
                                                <span class="text-xs text-gray-400 line-through ml-2">¥2,299</span>
                                                <span class="bg-pink-100 text-pink-600 text-xs px-1 rounded ml-2">季节</span>
                                            </div>
                                        </div>
                                        <div class="w-12 h-12 bg-gradient-to-br from-pink-400 to-pink-600 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-xs">桃花</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 四川城市 -->
                    <div id="sichuan-cities" class="province-cities hidden">
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="text-lg font-medium text-gray-800">四川省</h3>
                                <span class="text-xs text-gray-400">68个景点</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="text-center py-3 bg-blue-50 rounded-lg text-sm font-medium text-blue-600 cursor-pointer hover:bg-blue-100" onclick="selectCity('成都')">成都</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('九寨沟')">九寨沟</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('峨眉山')">峨眉山</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('乐山')">乐山</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('稻城')">稻城</div>
                                <div class="text-center py-3 bg-gray-50 rounded-lg text-sm cursor-pointer hover:bg-gray-100" onclick="selectCity('康定')">康定</div>
                            </div>
                        </div>
                        
                        <!-- 热门产品推荐 -->
                        <div class="mt-6">
                            <h4 class="text-sm font-medium text-gray-700 mb-3">🔥 热门产品</h4>
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow" onclick="viewProduct('九寨沟黄龙三日游')">
                                    <div class="flex items-center justify-between">
                                        <div class="flex-1">
                                            <h5 class="text-sm font-medium text-gray-800">九寨沟黄龙三日游</h5>
                                            <p class="text-xs text-gray-500 mt-1">含门票+住宿+往返交通</p>
                                            <div class="flex items-center mt-2">
                                                <span class="text-orange-500 font-bold text-sm">¥1,599</span>
                                                <span class="text-xs text-gray-400 line-through ml-2">¥1,999</span>
                                                <span class="bg-blue-100 text-blue-600 text-xs px-1 rounded ml-2">世遗</span>
                                            </div>
                                        </div>
                                        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-xs">九寨</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-white rounded-lg p-3 shadow-sm border border-gray-100 cursor-pointer hover:shadow-md transition-shadow" onclick="viewProduct('峨眉山乐山大佛二日游')">
                                    <div class="flex items-center justify-between">
                                        <div class="flex-1">
                                            <h5 class="text-sm font-medium text-gray-800">峨眉山乐山大佛二日游</h5>
                                            <p class="text-xs text-gray-500 mt-1">佛教圣地+温泉+素斋</p>
                                            <div class="flex items-center mt-2">
                                                <span class="text-orange-500 font-bold text-sm">¥899</span>
                                                <span class="text-xs text-gray-400 line-through ml-2">¥1,199</span>
                                                <span class="bg-yellow-100 text-yellow-600 text-xs px-1 rounded ml-2">祈福</span>
                                            </div>
                                        </div>
                                        <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-xs">峨眉</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar fixed bottom-0 left-0 right-0 h-16 flex items-center justify-around px-6">
            <div class="text-center text-gray-400">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                <span class="text-xs mt-1 block">首页</span>
            </div>
            <div class="text-center text-blue-500">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
                </svg>
                <span class="text-xs mt-1 block">分类</span>
            </div>
            <div class="text-center text-gray-400">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                <span class="text-xs mt-1 block">我的</span>
            </div>
        </div>
    </div>

    <script>
        /**
         * 显示指定省份的城市列表
         * @param {string} province - 省份标识 (xinjiang/xizang/sichuan)
         */
        function showProvince(province) {
            // 隐藏所有省份城市列表
            const allCities = document.querySelectorAll('.province-cities');
            allCities.forEach(cities => {
                cities.classList.add('hidden');
            });
            
            // 显示选中省份的城市列表
            const selectedCities = document.getElementById(province + '-cities');
            if (selectedCities) {
                selectedCities.classList.remove('hidden');
            }
            
            // 更新左侧导航样式
            const navItems = document.querySelectorAll('.w-24 > div');
            navItems.forEach(item => {
                item.classList.remove('bg-white', 'text-blue-500', 'border-r-2', 'border-blue-500');
                item.classList.add('text-gray-500');
            });
            
            // 高亮选中的省份
            const selectedNav = event.target;
            selectedNav.classList.remove('text-gray-500');
            selectedNav.classList.add('bg-white', 'text-blue-500', 'border-r-2', 'border-blue-500');
        }
        
        /**
         * 选择城市并跳转到相应页面
         * @param {string} cityName - 城市名称
         */
        function selectCity(cityName) {
            // 模拟城市选择，实际应用中可以跳转到搜索结果页面
            console.log('选择城市:', cityName);
            
            // 显示选择反馈
            const selectedElement = event.target;
            selectedElement.style.transform = 'scale(0.95)';
            setTimeout(() => {
                selectedElement.style.transform = 'scale(1)';
            }, 150);
            
            // 模拟跳转到搜索结果页面
            setTimeout(() => {
                alert(`即将为您展示 ${cityName} 的旅游产品`);
                // 实际应用中应该跳转到: window.location.href = `search_results.html?city=${encodeURIComponent(cityName)}`;
            }, 200);
        }
        
        /**
         * 绑定成交员关系
         * @param {string} salespersonName - 成交员姓名
         * @param {string} province - 省份标识
         */
        function bindSalesperson(salespersonName, province) {
            // 确认绑定
            const confirmed = confirm(`确定要绑定成交员 ${salespersonName} 吗？\n\n绑定后，您在该地区的所有订单都将由该成交员为您服务，并享受专属优惠和一对一咨询。`);
            
            if (confirmed) {
                // 模拟绑定过程
                const button = event.target;
                const originalText = button.textContent;
                
                button.textContent = '绑定中...';
                button.disabled = true;
                button.classList.add('opacity-50');
                
                // 模拟API调用
                setTimeout(() => {
                    // 绑定成功
                    button.textContent = '已绑定';
                    button.classList.remove('opacity-50');
                    button.classList.remove('hover:bg-orange-600', 'hover:bg-purple-600', 'hover:bg-green-600');
                    button.classList.add('bg-gray-400');
                    
                    // 存储绑定关系到本地存储
                    const bindingData = {
                        salesperson: salespersonName,
                        province: province,
                        bindTime: new Date().toISOString(),
                        userId: 'user_' + Date.now() // 模拟用户ID
                    };
                    
                    localStorage.setItem(`binding_${province}`, JSON.stringify(bindingData));
                    
                    // 显示成功消息
                    alert(`成功绑定成交员 ${salespersonName}！\n\n您现在可以享受：\n• 专属旅游咨询服务\n• 优先产品推荐\n• 专享优惠价格\n• 一对一行程定制`);
                    
                }, 1500);
            }
        }
        
        /**
         * 产品查看功能
         * @param {string} productName - 产品名称
         */
        function viewProduct(productName) {
            // 模拟跳转到产品详情页
            console.log(`查看产品: ${productName}`);
            alert(`正在跳转到「${productName}」详情页...`);
            // 实际项目中这里应该是页面跳转
            // window.location.href = `detail.html?product=${encodeURIComponent(productName)}`;
        }
        
        /**
         * 页面加载完成后的初始化
         */
        document.addEventListener('DOMContentLoaded', function() {
            console.log('分类页面加载完成');
            // 可以在这里添加其他初始化逻辑
        });
    </script>
</body>
</html>